<template>
  <div class="teacher-homework-view">
    <!-- 返回按钮 -->
    <div class="back-section">
      <button @click="goBack" class="back-btn">
        <i class="fas fa-arrow-left"></i>
        返回作业列表
      </button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载作业详情...</p>
    </div>

    <!-- 作业详情 -->
    <div v-else-if="homeworkData" class="homework-content">
      <!-- 作业头部卡片 -->
      <div class="homework-header-card">
        <div class="header-top">
          <h1 class="homework-title">
            <i class="fas fa-book"></i>
            {{ homeworkData.title }}
          </h1>
          <span class="status-badge" :class="getStatusClass(homeworkData.statusDesc || homeworkData.status)">
            {{ homeworkData.statusDesc || homeworkData.status }}
          </span>
        </div>
        
        <div class="homework-meta-grid">
          <div class="meta-item">
            <div class="meta-icon">
              <i class="fas fa-hashtag"></i>
            </div>
            <div class="meta-content">
              <span class="meta-label">作业ID</span>
              <span class="meta-value">{{ homeworkData.id }}</span>
            </div>
          </div>
          
          <div class="meta-item">
            <div class="meta-icon">
              <i class="fas fa-calendar-check"></i>
            </div>
            <div class="meta-content">
              <span class="meta-label">开始时间</span>
              <span class="meta-value">{{ formatDateTime(homeworkData.startTime) }}</span>
            </div>
          </div>
          
          <div class="meta-item">
            <div class="meta-icon">
              <i class="fas fa-calendar-times"></i>
            </div>
            <div class="meta-content">
              <span class="meta-label">截止时间</span>
              <span class="meta-value">{{ formatDateTime(homeworkData.endTime) }}</span>
            </div>
          </div>
          
          <div class="meta-item">
            <div class="meta-icon">
              <i class="fas fa-star"></i>
            </div>
            <div class="meta-content">
              <span class="meta-label">总分</span>
              <span class="meta-value score-highlight">{{ calculatedTotalScore }} 分</span>
            </div>
          </div>
        </div>
        
        <!-- 作业描述 -->
        <div v-if="homeworkData.description" class="homework-description">
          <h3>
            <i class="fas fa-file-alt"></i>
            作业说明
          </h3>
          <div class="description-content">{{ homeworkData.description }}</div>
        </div>
      </div>

      <!-- 题目列表卡片 -->
      <div class="questions-card">
        <div class="card-header">
          <h2>
            <i class="fas fa-tasks"></i>
            作业题目列表
          </h2>
          <span class="question-count">共 {{ questions.length }} 道题目</span>
        </div>
        
        <div class="questions-list">
          <div v-if="questions.length === 0" class="no-questions">
            <i class="fas fa-inbox"></i>
            <p>该作业暂无题目</p>
          </div>
          
          <div
            v-for="(question, index) in questions"
            :key="question.testQuestionId"
            class="question-item"
          >
            <div class="question-header">
              <div class="question-number">{{ index + 1 }}</div>
              <div class="question-info">
                <h3 class="question-title">{{ question.questionName || '未命名题目' }}</h3>
                <div class="question-meta">
                  <span class="meta-tag">
                    <i class="fas fa-trophy"></i>
                    分值：{{ question.score }} 分
                  </span>
                  <span class="meta-tag">
                    <i class="fas fa-sort"></i>
                    顺序：{{ question.sortOrder }}
                  </span>
                  <span class="meta-tag">
                    <i class="fas fa-hashtag"></i>
                    ID：{{ question.testQuestionId }}
                  </span>
                </div>
              </div>
              <button @click="toggleQuestionDetail(question)" class="view-detail-btn">
                <i :class="expandedQuestionIds.includes(question.testQuestionId) ? 'fas fa-chevron-up' : 'fas fa-eye'"></i>
                {{ expandedQuestionIds.includes(question.testQuestionId) ? '收起' : '查看题目' }}
              </button>
            </div>
            
            <!-- 题目详情展开区域 -->
            <div v-show="expandedQuestionIds.includes(question.testQuestionId)" class="question-detail-section">
              <div v-if="questionDetails[question.testQuestionId]" class="detail-content">
                <!-- 题目描述 -->
                <div v-if="questionDetails[question.testQuestionId].questionDescribe" class="detail-block">
                  <h4><i class="fas fa-align-left"></i> 题目描述</h4>
                  <div class="detail-text">{{ questionDetails[question.testQuestionId].questionDescribe }}</div>
                </div>
                
                <!-- 🔥 题目描述图片 (questionDescribePicture) -->
                <div v-if="questionDetails[question.testQuestionId].questionDescribePicture" class="detail-block">
                  <h4><i class="fas fa-image"></i> 题目描述图片</h4>
                  <div class="description-image">
                    <img :src="getImageUrl(questionDetails[question.testQuestionId].questionDescribePicture)" alt="题目描述图片">
                  </div>
                </div>
                
                <!-- 输入格式 -->
                <div v-if="questionDetails[question.testQuestionId].inputFormat" class="detail-block">
                  <h4><i class="fas fa-download"></i> 输入格式</h4>
                  <div class="detail-text">{{ questionDetails[question.testQuestionId].inputFormat }}</div>
                </div>
                
                <!-- 输出格式 -->
                <div v-if="questionDetails[question.testQuestionId].outputFormat" class="detail-block">
                  <h4><i class="fas fa-upload"></i> 输出格式</h4>
                  <!-- 如果是图片URL，显示图片 -->
                  <div v-if="isImageUrl(questionDetails[question.testQuestionId].outputFormat)" class="output-image">
                    <img :src="getImageUrl(questionDetails[question.testQuestionId].outputFormat)" alt="输出格式图片">
                  </div>
                  <!-- 否则显示文本 -->
                  <div v-else class="detail-text">{{ questionDetails[question.testQuestionId].outputFormat }}</div>
                </div>
                
                <!-- 数据范围和提示 -->
                <div v-if="questionDetails[question.testQuestionId].rangeAndPrompt" class="detail-block">
                  <h4><i class="fas fa-info-circle"></i> 数据范围和提示</h4>
                  <div class="detail-text">{{ questionDetails[question.testQuestionId].rangeAndPrompt }}</div>
                </div>
                
                <!-- 参考程序结果图 -->
                <div v-if="questionDetails[question.testQuestionId].questionPicture" class="detail-block">
                  <h4><i class="fas fa-image"></i> 参考程序结果图</h4>
                  <div class="reference-image">
                    <img :src="getImageUrl(questionDetails[question.testQuestionId].questionPicture)" alt="参考程序结果">
                  </div>
                </div>
                
                <!-- 测试用例 -->
                <div v-if="questionDetails[question.testQuestionId].testCases && questionDetails[question.testQuestionId].testCases.length > 0" class="detail-block">
                  <h4><i class="fas fa-vial"></i> 测试用例</h4>
                  <div class="test-cases-grid">
                    <div v-for="(testCase, tcIndex) in questionDetails[question.testQuestionId].testCases" 
                         :key="tcIndex" 
                         class="test-case-card">
                      <div class="test-case-header">测试用例 {{ tcIndex + 1 }}</div>
                      <div class="test-case-body">
                        <div class="test-case-row">
                          <label>输入：</label>
                          <div class="test-case-value">{{ testCase.input || '无输入' }}</div>
                        </div>
                        <div class="test-case-row">
                          <label>输出：</label>
                          <!-- 如果是图片URL，显示图片 -->
                          <div v-if="isImageUrl(testCase.expectedOutput || testCase.output)" class="test-case-image">
                            <img :src="getImageUrl(testCase.expectedOutput || testCase.output)" alt="测试用例输出">
                          </div>
                          <!-- 否则显示文本 -->
                          <div v-else class="test-case-value">{{ testCase.expectedOutput || testCase.output || '无输出' }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div v-else class="loading-detail">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载题目详情中...</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <i class="fas fa-exclamation-circle"></i>
      <p>加载作业详情失败</p>
      <button @click="loadHomeworkDetail" class="retry-btn">重试</button>
    </div>
  </div>
</template>

<script>
import { getHomeworkDetail } from '@/api/homework'
import logger from '../utils/logger.js'

export default {
  name: 'TeacherHomeworkView',
  data() {
    return {
      loading: true,
      homeworkData: null,
      questions: [],
      expandedQuestionIds: [], // 🔥 改为数组，支持多个题目同时展开
      questionDetails: {} // 存储题目详细信息
    }
  },
  computed: {
    // 计算作业总分
    calculatedTotalScore() {
      if (!this.questions || this.questions.length === 0) {
        return 0
      }
      return this.questions.reduce((sum, q) => sum + (parseInt(q.score) || 0), 0)
    }
  },
  mounted() {
    logger.log('📚 [TeacherHomeworkView] 页面加载')
    this.loadHomeworkDetail()
  },
  methods: {
    async loadHomeworkDetail() {
      try {
        const homeworkId = this.$route.params.id
        
        if (!homeworkId) {
          logger.error('❌ [TeacherHomeworkView] 作业ID不存在')
          alert('作业ID不存在')
          this.goBack()
          return
        }
        
        this.loading = true
        logger.log('📥 [TeacherHomeworkView] 开始加载作业详情，ID:', homeworkId)
        
        // 调用作业详情API
        const response = await getHomeworkDetail(homeworkId)
        
        logger.log('✅ [TeacherHomeworkView] API响应:', response)
        
        if (response && response.code === 0 && response.data) {
          this.homeworkData = response.data
          
          // 解析题目列表
          if (this.homeworkData.questions && Array.isArray(this.homeworkData.questions)) {
            this.questions = this.homeworkData.questions
            logger.log('📝 [TeacherHomeworkView] 题目数量:', this.questions.length)
            
            // 🔥 自动加载所有题目的详细信息
            logger.log('🚀 [TeacherHomeworkView] 开始自动加载所有题目详情...')
            await this.loadAllQuestionsDetail()
          }
          
          logger.log('✅ [TeacherHomeworkView] 作业详情加载成功:', this.homeworkData)
        } else {
          logger.error('❌ [TeacherHomeworkView] 加载作业详情失败')
          alert('加载作业详情失败')
          this.goBack()
        }
      } catch (error) {
        logger.error('❌ [TeacherHomeworkView] 加载作业详情失败:', error)
        alert('加载作业详情失败：' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    
    // 🔥 自动加载所有题目的详细信息
    async loadAllQuestionsDetail() {
      try {
        logger.log('📚 [TeacherHomeworkView] 开始批量加载所有题目详情')
        
        const api = await import('@/api/config')
        
        // 并行加载所有题目
        const loadPromises = this.questions.map(async (question, index) => {
          const questionId = question.testQuestionId
          
          logger.log(`📥 [TeacherHomeworkView] 加载第${index + 1}题，ID:`, questionId)
          
          try {
            const response = await api.default.get('/goc/testQuestion/findById', {
              params: { id: questionId }
            })
            
            if (response && response.code === 0 && response.data) {
              // 解析测试用例
              let parsedTestCases = []
              if (response.data.testCases) {
                parsedTestCases = this.parseTestCases(response.data.testCases)
              }
              
              // 保存题目详情（Vue 3 直接赋值）
              this.questionDetails[questionId] = {
                ...response.data,
                testCases: parsedTestCases
              }
              
              logger.log(`✅ [TeacherHomeworkView] 第${index + 1}题详情加载成功`)
              logger.log(`📦 [TeacherHomeworkView] 第${index + 1}题详情:`, this.questionDetails[questionId])
            }
          } catch (error) {
            logger.error(`❌ [TeacherHomeworkView] 第${index + 1}题加载失败:`, error)
          }
        })
        
        // 等待所有题目加载完成
        await Promise.all(loadPromises)
        
        logger.log('✅ [TeacherHomeworkView] 所有题目详情加载完成')
        logger.log('📦 [TeacherHomeworkView] questionDetails:', this.questionDetails)
        logger.log('📦 [TeacherHomeworkView] questionDetails keys:', Object.keys(this.questionDetails))
        logger.log('📦 [TeacherHomeworkView] 详情数量:', Object.keys(this.questionDetails).length)
        
        // 等待 Vue 更新完成
        await this.$nextTick()
        
        // 🔥 自动展开所有题目
        if (this.questions.length > 0) {
          this.expandedQuestionIds = this.questions.map(q => q.testQuestionId)
          logger.log('📥 [TeacherHomeworkView] 自动展开所有题目，IDs:', this.expandedQuestionIds)
          
          // 再次等待更新
          await this.$nextTick()
        }
        
        // 强制更新视图
        this.$forceUpdate()
        
      } catch (error) {
        logger.error('❌ [TeacherHomeworkView] 批量加载题目详情失败:', error)
      }
    },
    
    // 🔥 切换题目详情展开/收起
    async toggleQuestionDetail(question) {
      const questionId = question.testQuestionId
      
      // 如果点击的是已展开的题目，则收起
      if (this.expandedQuestionIds.includes(questionId)) {
        // 从数组中移除
        this.expandedQuestionIds = this.expandedQuestionIds.filter(id => id !== questionId)
        logger.log('📤 [TeacherHomeworkView] 收起题目:', question.questionName)
        logger.log('📦 [TeacherHomeworkView] 当前展开的题目IDs:', this.expandedQuestionIds)
        return
      }
      
      // 展开题目（添加到数组）
      this.expandedQuestionIds.push(questionId)
      logger.log('📥 [TeacherHomeworkView] 展开题目:', question.questionName)
      logger.log('🔍 [TeacherHomeworkView] expandedQuestionIds:', this.expandedQuestionIds)
      logger.log('🔍 [TeacherHomeworkView] questionDetails keys:', Object.keys(this.questionDetails))
      logger.log('🔍 [TeacherHomeworkView] 该题目详情是否存在:', !!this.questionDetails[questionId])
      
      // 如果已经加载过详情，直接显示
      if (this.questionDetails[questionId]) {
        logger.log('✅ [TeacherHomeworkView] 使用已缓存的题目详情')
        logger.log('📦 [TeacherHomeworkView] 题目详情内容:', this.questionDetails[questionId])
        
        // 强制更新视图
        this.$forceUpdate()
        return
      }
      
      // 否则加载题目详情
      try {
        logger.log('🌐 [TeacherHomeworkView] 开始加载题目详情，ID:', questionId)
        
        const api = await import('@/api/config')
        const response = await api.default.get('/goc/testQuestion/findById', {
          params: { id: questionId }
        })
        
        logger.log('✅ [TeacherHomeworkView] 题目详情响应:', response)
        
        if (response && response.code === 0 && response.data) {
          // 解析测试用例
          let parsedTestCases = []
          if (response.data.testCases) {
            parsedTestCases = this.parseTestCases(response.data.testCases)
          }
          
          // 保存题目详情（Vue 3 直接赋值）
          this.questionDetails[questionId] = {
            ...response.data,
            testCases: parsedTestCases
          }
          
          logger.log('✅ [TeacherHomeworkView] 题目详情已加载')
          logger.log('📦 [TeacherHomeworkView] 已保存的题目详情:', this.questionDetails[questionId])
          logger.log('🔍 [TeacherHomeworkView] questionDetails 对象:', this.questionDetails)
          logger.log('🔍 [TeacherHomeworkView] questionDetails keys:', Object.keys(this.questionDetails))
          
          // 强制更新视图
          this.$forceUpdate()
        } else {
          logger.error('❌ [TeacherHomeworkView] 题目详情加载失败')
          alert('加载题目详情失败')
          // 从展开列表中移除该题目
          this.expandedQuestionIds = this.expandedQuestionIds.filter(id => id !== questionId)
        }
      } catch (error) {
        logger.error('❌ [TeacherHomeworkView] 加载题目详情失败:', error)
        alert('加载题目详情失败')
        // 从展开列表中移除该题目
        this.expandedQuestionIds = this.expandedQuestionIds.filter(id => id !== questionId)
      }
    },
    
    // 解析测试用例JSON字符串
    parseTestCases(testCasesData) {
      try {
        // 如果已经是数组，直接返回
        if (Array.isArray(testCasesData)) {
          return testCasesData
        }
        
        // 如果是字符串，尝试解析JSON
        if (typeof testCasesData === 'string' && testCasesData.trim()) {
          const parsed = JSON.parse(testCasesData)
          const testCasesArray = Array.isArray(parsed) ? parsed : [parsed]
          
          // 格式化测试用例
          return testCasesArray.map(tc => ({
            input: tc.input || tc.inputData || '无输入',
            expectedOutput: tc.expectedOutput || tc.output || tc.outputData || tc.expected || '',
            output: tc.output || tc.expectedOutput || ''
          }))
        }
        
        return []
      } catch (error) {
        logger.error('❌ [TeacherHomeworkView] 解析测试用例失败:', error)
        return []
      }
    },
    
    // 判断是否是图片URL
    isImageUrl(text) {
      if (!text) return false
      
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
      const lowerText = text.toLowerCase()
      const hasImageExtension = imageExtensions.some(ext => lowerText.includes(ext))
      const isUrl = text.startsWith('http') || text.startsWith('/api/') || text.includes('文件上传成功')
      
      return hasImageExtension && isUrl
    },
    
    // 获取图片URL
    getImageUrl(imagePath) {
      if (!imagePath) return ''
      
      // 处理后端返回的特殊格式
      if (imagePath.includes('文件上传成功') && imagePath.includes('url为：')) {
        const urlMatch = imagePath.match(/url为：(.+)$/)
        if (urlMatch && urlMatch[1]) {
          return urlMatch[1].trim()
        }
      }
      
      // 如果已经是完整URL，直接返回
      if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
        return imagePath
      }
      
      // 从全局配置获取baseURL
      const GLOBAL_CONFIG = window.GLOBAL_CONFIG || {}
      const baseURL = GLOBAL_CONFIG.API_BASE_URL || 'http://localhost:8000'
      return baseURL + imagePath
    },
    
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '-'
      try {
        const date = new Date(dateTimeStr)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (error) {
        return dateTimeStr
      }
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        '已发布': 'status-published',
        '未发布': 'status-unpublished',
        '已截止': 'status-ended',
        '草稿': 'status-draft'
      }
      return statusMap[status] || 'status-default'
    },
    
    goBack() {
      this.$router.push('/assign-homework')
    }
  }
}
</script>

<style scoped>
.teacher-homework-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

/* 返回按钮 */
.back-section {
  margin-bottom: 20px;
}

.back-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.95);
  color: #667eea;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.back-btn:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.back-btn i {
  font-size: 16px;
}

/* 加载状态 */
.loading-container {
  text-align: center;
  padding: 100px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-container {
  text-align: center;
  padding: 100px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #e74c3c;
}

.error-container i {
  font-size: 64px;
  margin-bottom: 20px;
}

.retry-btn {
  margin-top: 20px;
  padding: 10px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* 作业内容 */
.homework-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 作业头部卡片 */
.homework-header-card {
  background: white;
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid #f0f0f0;
}

.homework-title {
  font-size: 32px;
  color: #2c3e50;
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 15px;
}

.homework-title i {
  color: #667eea;
  font-size: 36px;
}

/* 状态徽章 */
.status-badge {
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-published {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: white;
  box-shadow: 0 4px 15px rgba(56, 239, 125, 0.3);
}

.status-unpublished {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

.status-ended {
  background: linear-gradient(135deg, #868f96, #596164);
  color: white;
  box-shadow: 0 4px 15px rgba(89, 97, 100, 0.3);
}

.status-draft {
  background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
  color: white;
  box-shadow: 0 4px 15px rgba(166, 193, 238, 0.3);
}

/* 元信息网格 */
.homework-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 2px solid #e3e8ff;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

.meta-item:hover {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8edff 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.meta-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.meta-icon i {
  color: white;
  font-size: 22px;
}

.meta-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.meta-label {
  font-size: 13px;
  color: #8b95a5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 20px;
  color: #1a202c;
  font-weight: 700;
}

.score-highlight {
  color: #667eea;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

/* 作业描述 */
.homework-description {
  margin-top: 10px;
  padding: 25px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 10%);
  border-radius: 12px;
  border-left: 5px solid #ff9800;
}

.homework-description h3 {
  margin: 0 0 15px 0;
  color: #e65100;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.homework-description h3 i {
  font-size: 20px;
}

.description-content {
  color: #5d4037;
  line-height: 1.8;
  white-space: pre-wrap;
  font-size: 15px;
}

/* 题目列表卡片 */
.questions-card {
  background: white;
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid #f0f0f0;
}

.card-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header h2 i {
  color: #667eea;
  font-size: 28px;
}

.question-count {
  padding: 8px 18px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 题目列表 */
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.no-questions {
  text-align: center;
  padding: 80px 20px;
  color: #95a5a6;
}

.no-questions i {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.question-item {
  background: linear-gradient(135deg, #f6f9fc 0%, #e9f0f5 100%);
  border-radius: 12px;
  padding: 25px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.question-item:hover {
  border-color: #667eea;
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}

.question-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.question-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.question-info {
  flex: 1;
}

.question-title {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
}

.question-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-tag {
  padding: 6px 12px;
  background: white;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-tag i {
  color: #667eea;
  font-size: 14px;
}

.view-detail-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
  flex-shrink: 0;
}

.view-detail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.5);
}

.view-detail-btn i {
  font-size: 16px;
}

/* 题目详情展开区域 */
.question-detail-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e3e8ff;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loading-detail {
  text-align: center;
  padding: 40px;
  color: #667eea;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.loading-detail i {
  font-size: 24px;
}

.detail-block {
  background: white;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #667eea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.detail-block h4 {
  margin: 0 0 12px 0;
  color: #667eea;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-block h4 i {
  font-size: 18px;
}

.detail-text {
  color: #2c3e50;
  line-height: 1.8;
  font-size: 15px;
  white-space: pre-wrap;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
}

/* 题目描述图片 */
.description-image {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.description-image img {
  max-width: 500px;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.description-image img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: zoom-in;
}

/* 输出格式图片 */
.output-image {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.output-image img {
  max-width: 500px;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 参考程序结果图 */
.reference-image {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.reference-image img {
  max-width: 500px;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 测试用例网格 */
.test-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.test-case-card {
  background: white;
  border: 2px solid #e3e8ff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.test-case-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.test-case-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.test-case-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-case-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.test-case-row label {
  font-size: 13px;
  color: #667eea;
  font-weight: 600;
}

.test-case-value {
  background: #f8f9fa;
  padding: 10px 12px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #2c3e50;
  white-space: pre-wrap;
  border: 1px solid #e9ecef;
}

.test-case-image {
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.test-case-image img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .teacher-homework-view {
    padding: 10px;
  }
  
  .homework-header-card,
  .questions-card {
    padding: 20px;
  }
  
  .homework-title {
    font-size: 24px;
  }
  
  .homework-meta-grid {
    grid-template-columns: 1fr;
  }
  
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .question-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .view-detail-btn {
    width: 100%;
    justify-content: center;
  }
  
  .test-cases-grid {
    grid-template-columns: 1fr;
  }
}
</style>

